<template>
  <div class="course-notify">
    <my-tabs :tab-list="tabList">
      <template v-slot="{ row }">
        <li
          class="item pointer"
          :class="{ active: status === row.type }"
          @click="handleClickMenu(row)"
        >
          {{ row.title }}
        </li>
      </template>
      <el-link slot="right" type="info" :underline="false" @click="handleReadAll">一键已读</el-link>
    </my-tabs>
    <div class="notify-list" v-if="systemCourseList.length">
      <div class="item" v-for="item in systemCourseList" :key="item.id">
        <el-row type="flex" class="item-wrap">
          <span class="badge" v-if="item.is_read == 0"></span>
          <div class="title">
            <span class="text" @click="handlePuth(item)">{{ item.content }}</span>
            <!-- <el-link :underline="false" type="primary" v-if="item.is_link == 1" @click="handlePuth(item)"
              >点击这里去观看</el-link
            > -->
          </div>
        </el-row>
        <div class="time">{{ item.update_time }}</div>
      </div>
    </div>
    <edu-no-data :image="false" text="暂时没有课程消息哦~" v-else></edu-no-data>
    <edu-pagination @handleCurrentChange="handleCurrentChange"></edu-pagination>
  </div>
</template>

<script>
import MyTabs from '../components/myTab.vue'
import EduNoData from '@/components/EduNoData'
import EduPagination from '@/components/EduPagination'
export default {
  components: {
    MyTabs,
    EduNoData,
    EduPagination
  },
  inject: ['reload'],
  data() {
    return {
      tabList: [
        {
          type: '2',
          title: '全部'
        },
        {
          type: '1',
          title: '已读'
        },
        {
          type: '0',
          title: '未读'
        }
      ],
      systemCourseList: [],
      status: '2'
    }
  },
  computed: {
    notifyState() {
      let state = false
      for (let item of this.systemCourseList) {
        if (item.is_read == 0) {
          state = true
        }
      }
      return state
    }
  },
  mounted() {
    this.handleSystemCourseInfo()
  },
  methods: {
    handleSystemCourseInfo() {
      this.$api.getSystemCourse(
        {
          status: this.status,
          page: this.$store.getters['paginate/page'],
          count: 20
        },
        res => {
          let data = res.data
          this.systemCourseList = data.data
          this.$store.dispatch('paginate/setPaginate', {
            listRows: 20,
            total: data.total
          })
        }
      )
    },
    // 分页
    handleCurrentChange() {
      this.handleSystemCourseInfo()
    },
    // 跳转到课程详情
    handlePuth(item) {
      this.$router.push({ path: '/course/' + item.link_data_id })
      this.handleRead(item)
    },
    // 点击读取消息
    handleRead(item) {
      if (item.is_read == 0) {
        this.$api.createMessageRead({
          operate: 1,
          object: 2,
          id: item.id
        })
      }
    },
    // 一键读取
    handleReadAll() {
      if (this.notifyState) {
        this.$api.createMessageRead(
          {
            operate: 2,
            object: 2
          },
          res => {
            this.$message.success(res.msg, res => {
              this.handleSystemCourseInfo()
            })
          }
        )
      }
    },
    handleClickMenu(data) {
      this.status = data.type
      this.$store.dispatch('paginate/setPaginate', {
        currentPage: 1
      })
      this.handleSystemCourseInfo()
    }
  },
  destroyed() {
    this.$store.commit('paginate/SET_PAGINATE_DEFAULT')
  }
}
</script>

<style lang="scss" scoped>
.course-notify {
  .notify-list {
    .item {
      padding: 15px 0;
      border-bottom: 1px solid $border-color-divider;
      .item-wrap {
        flex-wrap: wrap;
      }
      .badge {
        margin-top: 6px;
        margin-right: 5px;
        width: 8px;
        height: 8px;
        background: $color-danger;
        border-radius: 50%;
      }
      .title {
        flex: 1;
        .text {
          color: $text-color-import;
          font-size: 14px;
          line-height: 21px;
          cursor: pointer;
        }
      }
      .time {
        margin-top: 5px;
        color: $text-color-secondary;
        font-size: 12px;
      }
    }
  }
}
</style>
